<template>
  <div class="interview-result-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-section">
      <el-skeleton :rows="8" animated />
    </div>

    <!-- 头部信息 -->
    <div v-else class="result-header">
      <div class="header-content">
        <div class="back-button">
          <el-button @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            返回
          </el-button>
        </div>
        <div class="result-title">
          <h1>面试结果</h1>
          <p>{{ interview.company }} - {{ interview.position }}</p>
        </div>
      </div>
    </div>

    <!-- 结果概览 -->
    <div class="result-overview">
      <div class="overview-left">
        <div class="company-info">
          <div class="company-logo">
            <span>{{ interview.company.charAt(0) }}</span>
          </div>
          <div class="company-details">
            <h3>{{ interview.company }}</h3>
            <p>{{ interview.position }}</p>
            <div class="interview-time">
              <el-icon><Calendar /></el-icon>
              <span>面试时间：{{ formatDateTime(interview.interviewTime) }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="overview-right">
        <div class="result-status">
          <div :class="['status-badge', result.status]">
            <el-icon v-if="result.status === 'passed'"><Check /></el-icon>
            <el-icon v-else><Close /></el-icon>
            <span>{{ result.status === 'passed' ? '恭喜录取' : '暂未录取' }}</span>
          </div>
          <div class="overall-score">
            <div class="score-circle">
              <div class="score-number">{{ result.overallScore }}</div>
              <div class="score-label">综合得分</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 逻辑思维得分 -->
    <div v-if="result.logicalThinkingScore > 0" class="logic-score-section">
      <div class="section-header">
        <h3>逻辑思维得分</h3>
        <div class="logic-score">
          <span class="score-value">{{ result.logicalThinkingScore }}</span>
          <span class="score-max">/100</span>
        </div>
      </div>
      <el-progress 
        :percentage="result.logicalThinkingScore" 
        :color="getProgressColor(result.logicalThinkingScore)"
        :stroke-width="8"
      />
    </div>

    <!-- 综合表达能力评分 -->
    <div v-if="result.expression_avg_score > 0" class="expression-score-section">
      <div class="section-header">
        <h3>综合表达能力评分</h3>
        <div class="expression-score">
          <span class="score-value">{{ result.expression_avg_score }}</span>
          <span class="score-max">/100</span>
        </div>
      </div>
      
      <div class="expression-breakdown">
        <div class="breakdown-item">
          <span class="breakdown-label">面部表情分析</span>
          <span class="breakdown-value">{{ result.expression_analysis_summary?.average_concentration || 0 }}</span>
          <el-progress 
            :percentage="result.expression_analysis_summary?.average_concentration || 0" 
            :stroke-width="4"
            :show-text="false"
            :color="getProgressColor(result.expression_analysis_summary?.average_concentration || 0)"
          />
        </div>
        
        <div class="breakdown-item">
          <span class="breakdown-label">音频分析</span>
          <span class="breakdown-value">{{ result.audio_analysis_summary?.clarity_score || 0 }}</span>
          <el-progress 
            :percentage="result.audio_analysis_summary?.clarity_score || 0" 
            :stroke-width="4"
            :show-text="false"
            :color="getProgressColor(result.audio_analysis_summary?.clarity_score || 0)"
          />
        </div>
      </div>

      <!-- 表情分析详细结果 -->
      <div v-if="result.expression_analysis_summary" class="expression-details">
        <h4>表情分析详情</h4>
        <div class="expression-metrics">
          <div class="metric-item">
            <span class="metric-label">专注度</span>
            <span class="metric-value">{{ result.expression_analysis_summary.average_concentration }}</span>
            <el-progress 
              :percentage="result.expression_analysis_summary.average_concentration" 
              :stroke-width="3"
              :show-text="false"
              :color="getProgressColor(result.expression_analysis_summary.average_concentration)"
            />
          </div>
          
          <div class="metric-item">
            <span class="metric-label">情绪表现</span>
            <span class="metric-value">{{ result.expression_analysis_summary.emotion_avg_score }}</span>
            <el-progress 
              :percentage="result.expression_analysis_summary.emotion_avg_score" 
              :stroke-width="3"
              :show-text="false"
              :color="getProgressColor(result.expression_analysis_summary.emotion_avg_score)"
            />
          </div>
          
          <div class="metric-item">
            <span class="metric-label">姿态控制</span>
            <span class="metric-value">{{ result.expression_analysis_summary.pose_avg_score }}</span>
            <el-progress 
              :percentage="result.expression_analysis_summary.pose_avg_score" 
              :stroke-width="3"
              :show-text="false"
              :color="getProgressColor(result.expression_analysis_summary.pose_avg_score)"
            />
          </div>
          
          <div class="metric-item">
            <span class="metric-label">视线管理</span>
            <span class="metric-value">{{ result.expression_analysis_summary.gaze_avg_score }}</span>
            <el-progress 
              :percentage="result.expression_analysis_summary.gaze_avg_score" 
              :stroke-width="3"
              :show-text="false"
              :color="getProgressColor(result.expression_analysis_summary.gaze_avg_score)"
            />
          </div>
        </div>
        
        <div class="expression-evaluation">
          <el-tag :type="getOverallEvaluationType(result.expression_analysis_summary.overall_evaluation)">
            {{ result.expression_analysis_summary.overall_evaluation }}
          </el-tag>
        </div>
      </div>
    </div>

    <!-- 视频分析结果 -->
    <div v-if="result.videoScores.length > 0" class="video-analysis-section">
      <div class="section-header">
        <h3>视频题目分析结果</h3>
      </div>
      <div class="video-scores-grid">
        <div v-for="(video, index) in result.videoScores" :key="index" class="video-score-card">
          <div class="video-header">
            <h4>{{ video.question_title }}</h4>
            <el-tag :type="getCategoryType(video.question_category)">
              {{ getCategoryName(video.question_category) }}
            </el-tag>
          </div>
          
          <div class="video-content">
            <video v-if="video.video_url" :src="getVideoUrl(video.video_url)" controls width="100%"></video>
          </div>
          
          <div class="scores-detail">
            <div v-if="video.scores.expression_score" class="score-item">
              <span class="score-label">表达能力</span>
              <span class="score-value">{{ video.scores.expression_score }}</span>
              <el-progress 
                :percentage="video.scores.expression_score" 
                :stroke-width="4"
                :show-text="false"
              />
            </div>
            <div v-if="video.scores.innovation_score" class="score-item">
              <span class="score-label">创新能力</span>
              <span class="score-value">{{ video.scores.innovation_score }}</span>
              <el-progress 
                :percentage="video.scores.innovation_score" 
                :stroke-width="4"
                :show-text="false"
              />
            </div>
            <div v-if="video.scores.professional_skill_score" class="score-item">
              <span class="score-label">专业技能</span>
              <span class="score-value">{{ video.scores.professional_skill_score }}</span>
              <el-progress 
                :percentage="video.scores.professional_skill_score" 
                :stroke-width="4"
                :show-text="false"
              />
            </div>
            <div v-if="video.scores.stress_management_score" class="score-item">
              <span class="score-label">压力应对</span>
              <span class="score-value">{{ video.scores.stress_management_score }}</span>
              <el-progress 
                :percentage="video.scores.stress_management_score" 
                :stroke-width="4"
                :show-text="false"
              />
            </div>
          </div>
          
          <!-- 音频分析 -->
          <div v-if="video.audio_analysis" class="audio-analysis">
            <div class="audio-header">
            <h5>音频分析</h5>
              <div class="audio-summary">
                <el-tag :type="getAudioScoreType(video.audio_analysis.overall_audio_score)" size="small">
                  {{ getAudioScoreLevel(video.audio_analysis.overall_audio_score) }}
                </el-tag>
                <span class="analysis-info">
                  综合得分: {{ video.audio_analysis.overall_audio_score?.toFixed(1) || 'N/A' }}
                </span>
              </div>
            </div>

            <!-- 语音转文字 -->
            <div v-if="video.audio_analysis.transcribed_text" class="transcription-section">
              <h6>语音转文字</h6>
              <div class="transcription-content">
                <p>{{ video.audio_analysis.transcribed_text }}</p>
                <div class="transcription-stats">
                  <span class="stat-item">
                    <el-icon><Document /></el-icon>
                    字数: {{ video.audio_analysis.word_count || 0 }}
                  </span>
                  <span class="stat-item">
                    <el-icon><Clock /></el-icon>
                    时长: {{ video.audio_analysis.speech_duration_seconds?.toFixed(1) || 0 }}秒
                  </span>
                </div>
              </div>
            </div>

            <!-- 核心音频指标 -->
            <div class="audio-core-metrics">
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(video.audio_analysis.speed_score || 0) }">
                  <span class="metric-value">{{ Math.round(video.audio_analysis.speed_score || 0) }}</span>
                </div>
                <span class="metric-label">语速</span>
                <span class="metric-detail">{{ getAudioFieldValue(video.audio_analysis, ['speech_rate', 'speech_rate_syllables_per_second', 'average_speech_rate']) || 0 }} 音节/秒</span>
              </div>
              
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(video.audio_analysis.pitch_score || 0) }">
                  <span class="metric-value">{{ Math.round(video.audio_analysis.pitch_score || 0) }}</span>
                </div>
                <span class="metric-label">音高</span>
                <span class="metric-detail">{{ getAudioFieldValue(video.audio_analysis, ['mean_pitch', 'average_pitch_frequency_hz', 'pitch_frequency']) || 0 }} Hz</span>
              </div>
              
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(video.audio_analysis.volume_score || 0) }">
                  <span class="metric-value">{{ Math.round(video.audio_analysis.volume_score || 0) }}</span>
                </div>
                <span class="metric-label">音量</span>
                <span class="metric-detail">{{ getAudioFieldValue(video.audio_analysis, ['mean_volume', 'average_volume_db', 'volume_db']) || 0 }} dB</span>
              </div>
              
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(video.audio_analysis.fluency_score || 0) }">
                  <span class="metric-value">{{ Math.round(video.audio_analysis.fluency_score || 0) }}</span>
                </div>
                <span class="metric-label">流利度</span>
                <span class="metric-detail">{{ getAudioFieldValue(video.audio_analysis, ['articulation_rate', 'articulation_rate_syllables_per_second']) || 0 }} 音节/秒</span>
              </div>
            </div>

            <!-- 详细音频指标 -->
            <div class="audio-detailed-metrics">
              <div class="metrics-grid">
              <div class="metric-item">
                  <span class="metric-label">语速得分</span>
                  <span class="metric-value">{{ video.audio_analysis.speed_score?.toFixed(1) || 0 }}</span>
                  <el-progress 
                    :percentage="video.audio_analysis.speed_score || 0" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(video.audio_analysis.speed_score || 0)"
                  />
              </div>
                
              <div class="metric-item">
                  <span class="metric-label">音高得分</span>
                  <span class="metric-value">{{ video.audio_analysis.pitch_score?.toFixed(1) || 0 }}</span>
                  <el-progress 
                    :percentage="video.audio_analysis.pitch_score || 0" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(video.audio_analysis.pitch_score || 0)"
                  />
              </div>
                
              <div class="metric-item">
                  <span class="metric-label">音量得分</span>
                  <span class="metric-value">{{ video.audio_analysis.volume_score?.toFixed(1) || 0 }}</span>
                  <el-progress 
                    :percentage="video.audio_analysis.volume_score || 0" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(video.audio_analysis.volume_score || 0)"
                  />
              </div>
                
                <div class="metric-item">
                  <span class="metric-label">停顿得分</span>
                  <span class="metric-value">{{ video.audio_analysis.pause_score?.toFixed(1) || 0 }}</span>
                  <el-progress 
                    :percentage="video.audio_analysis.pause_score || 0" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(video.audio_analysis.pause_score || 0)"
                  />
                </div>

                <div class="metric-item">
                  <span class="metric-label">流利度得分</span>
                  <span class="metric-value">{{ video.audio_analysis.fluency_score?.toFixed(1) || 0 }}</span>
                  <el-progress 
                    :percentage="video.audio_analysis.fluency_score || 0" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(video.audio_analysis.fluency_score || 0)"
                  />
                </div>

                <div class="metric-item">
                  <span class="metric-label">发音速率得分</span>
                  <span class="metric-value">{{ video.audio_analysis.articulation_rate_score?.toFixed(1) || 0 }}</span>
                  <el-progress 
                    :percentage="video.audio_analysis.articulation_rate_score || 0" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(video.audio_analysis.articulation_rate_score || 0)"
                  />
                </div>
              </div>
            </div>

            <!-- 音频统计信息 -->
            <div class="audio-stats">
              <div class="stat-item">
                <span class="stat-label">性别识别</span>
                <span class="stat-value">{{ getGenderLabel(getAudioFieldValue(video.audio_analysis, ['gender', 'detected_gender'])) }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">停顿频次</span>
                <span class="stat-value">{{ getAudioFieldValue(video.audio_analysis, ['pause_frequency', 'total_pause_frequency_per_second', 'pause_count']) || 0 }} 次/秒</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">修正次数</span>
                <span class="stat-value">{{ getAudioFieldValue(video.audio_analysis, ['correction_frequency', 'correction_count_per_second', 'correction_count']) || 0 }} 次/秒</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">F2轨迹斜率</span>
                <span class="stat-value">{{ getAudioFieldValue(video.audio_analysis, ['f2_slope', 'f2_slope_hz_per_ms']) || 0 }} Hz/ms</span>
              </div>
            </div>

            <!-- 实时波形图 -->
            <div v-if="video.audio_analysis.frame_data && video.audio_analysis.frame_data.length > 0" class="waveform-section">
              <div class="waveform-header">
                <h6>实时音高和音量变化</h6>
                <el-button size="small" @click="toggleWaveformDetails(index)">
                  {{ showWaveformDetails[index] ? '收起' : '展开' }}
                </el-button>
              </div>
              
              <div v-if="showWaveformDetails[index]" class="waveform-chart">
                <div class="chart-container">
                  <canvas :ref="`waveformChart${index}`" width="800" height="300"></canvas>
                </div>
                
                <div class="waveform-legend">
                  <div class="legend-item">
                    <div class="legend-color pitch-color"></div>
                    <span>音高 (Hz)</span>
                  </div>
                  <div class="legend-item">
                    <div class="legend-color volume-color"></div>
                    <span>音量 (dB)</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 表情分析 -->
          <div v-if="video.expression_analysis" class="expression-analysis">
            <div class="expression-header">
            <h5>表情分析</h5>
              <div class="expression-summary">
                <el-tag :type="getOverallEvaluationType(video.expression_analysis.overall_evaluation)" size="small">
                  {{ video.expression_analysis.overall_evaluation }}
                </el-tag>
                <span class="analysis-info">
                  {{ video.expression_analysis.success_frames }}/{{ video.expression_analysis.total_frames }} 帧
                </span>
              </div>
            </div>
            
            <!-- 核心指标 -->
            <div class="expression-core-metrics">
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(video.expression_analysis.average_concentration) }">
                  <span class="metric-value">{{ Math.round(video.expression_analysis.average_concentration) }}</span>
                </div>
                <span class="metric-label">专注度</span>
              </div>
              
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(video.expression_analysis.emotion_avg_score) }">
                  <span class="metric-value">{{ Math.round(video.expression_analysis.emotion_avg_score) }}</span>
                </div>
                <span class="metric-label">情绪表现</span>
              </div>
              
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(video.expression_analysis.pose_avg_score) }">
                  <span class="metric-value">{{ Math.round(video.expression_analysis.pose_avg_score) }}</span>
                </div>
                <span class="metric-label">姿态控制</span>
              </div>
              
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(video.expression_analysis.gaze_avg_score) }">
                  <span class="metric-value">{{ Math.round(video.expression_analysis.gaze_avg_score) }}</span>
                </div>
                <span class="metric-label">视线管理</span>
              </div>
            </div>
            
            <!-- 详细指标 -->
            <div class="expression-detailed-metrics">
              <div class="metrics-grid">
              <div class="metric-item">
                  <span class="metric-label">专注度评分</span>
                  <span class="metric-value">{{ video.expression_analysis.average_concentration.toFixed(1) }}</span>
                  <el-progress 
                    :percentage="video.expression_analysis.average_concentration" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(video.expression_analysis.average_concentration)"
                  />
              </div>
                
              <div class="metric-item">
                  <span class="metric-label">情绪评分</span>
                  <span class="metric-value">{{ video.expression_analysis.emotion_avg_score.toFixed(1) }}</span>
                  <el-progress 
                    :percentage="video.expression_analysis.emotion_avg_score" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(video.expression_analysis.emotion_avg_score)"
                  />
              </div>
                
                <div class="metric-item">
                  <span class="metric-label">姿态评分</span>
                  <span class="metric-value">{{ video.expression_analysis.pose_avg_score.toFixed(1) }}</span>
                  <el-progress 
                    :percentage="video.expression_analysis.pose_avg_score" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(video.expression_analysis.pose_avg_score)"
                  />
            </div>
                
                <div class="metric-item">
                  <span class="metric-label">视线评分</span>
                  <span class="metric-value">{{ video.expression_analysis.gaze_avg_score.toFixed(1) }}</span>
                  <el-progress 
                    :percentage="video.expression_analysis.gaze_avg_score" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(video.expression_analysis.gaze_avg_score)"
                  />
                </div>
              </div>
            </div>
            
            <!-- 分析统计 -->
            <div class="expression-stats">
              <div class="stat-item">
                <span class="stat-label">分析时间</span>
                <span class="stat-value">{{ formatDateTime(video.expression_analysis.analyzed_at) }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">成功帧数</span>
                <span class="stat-value">{{ video.expression_analysis.success_frames }}/{{ video.expression_analysis.total_frames }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">成功率</span>
                <span class="stat-value">{{ ((video.expression_analysis.success_frames / video.expression_analysis.total_frames) * 100).toFixed(1) }}%</span>
              </div>
            </div>
            
            <!-- 帧数据详情（如果存在） -->
            <div v-if="video.expression_analysis.frame_data && video.expression_analysis.frame_data.length > 0" class="frame-details">
              <div class="frame-header">
                <h6>帧分析详情</h6>
                <el-button size="small" @click="toggleFrameDetails(index)">
                  {{ showFrameDetails[index] ? '收起' : '展开' }}
                </el-button>
              </div>
              
              <div v-if="showFrameDetails[index]" class="frame-grid">
                <div 
                  v-for="(frame, frameIndex) in video.expression_analysis.frame_data.slice(0, 6)" 
                  :key="frameIndex"
                  class="frame-item"
                >
                  <div class="frame-info">
                    <span class="frame-name">{{ frame.frame_name }}</span>
                    <el-tag size="small" :type="getEmotionType(frame.primary_emotion)">
                      {{ getEmotionLabel(frame.primary_emotion) }}
                    </el-tag>
                  </div>
                  
                  <div class="frame-scores">
                    <div class="frame-score">
                      <span>专注: {{ frame.concentration_score.toFixed(1) }}</span>
                      <el-progress 
                        :percentage="frame.concentration_score" 
                        :stroke-width="2"
                        :show-text="false"
                        :color="getScoreColor(frame.concentration_score)"
                      />
                    </div>
                    
                    <div class="frame-score">
                      <span>情绪: {{ frame.emotion_score.toFixed(1) }}</span>
                      <el-progress 
                        :percentage="frame.emotion_score" 
                        :stroke-width="2"
                        :show-text="false"
                        :color="getScoreColor(frame.emotion_score)"
                      />
                    </div>
                    
                    <div class="frame-score">
                      <span>姿态: {{ frame.pose_score.toFixed(1) }}</span>
                      <el-progress 
                        :percentage="frame.pose_score" 
                        :stroke-width="2"
                        :show-text="false"
                        :color="getScoreColor(frame.pose_score)"
                      />
                    </div>
                    
                    <div class="frame-score">
                      <span>视线: {{ frame.gaze_score.toFixed(1) }}</span>
                      <el-progress 
                        :percentage="frame.gaze_score" 
                        :stroke-width="2"
                        :show-text="false"
                        :color="getScoreColor(frame.gaze_score)"
                      />
                    </div>
                  </div>
                  
                  <div class="frame-angles">
                    <div class="angle-item">
                      <span>偏航: {{ frame.yaw_angle.toFixed(1) }}°</span>
                    </div>
                    <div class="angle-item">
                      <span>俯仰: {{ frame.pitch_angle.toFixed(1) }}°</span>
                    </div>
                    <div class="angle-item">
                      <span>翻滚: {{ frame.roll_angle.toFixed(1) }}°</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 详细分析 -->
    <div class="detailed-analysis">
      <div class="analysis-header">
        <h2>详细分析报告</h2>
        <p>基于AI智能分析的面试表现评估</p>
      </div>
      
      <div class="analysis-grid">
        <div v-for="(skill, index) in result.skills" :key="index" class="skill-card">
          <div class="skill-header">
            <div class="skill-icon">
              <el-icon><Tools /></el-icon>
            </div>
            <div class="skill-info">
              <h4>{{ skill.name }}</h4>
              <div class="skill-score">
                <span class="score-value">{{ skill.score }}</span>
                <span class="score-max">/100</span>
              </div>
            </div>
          </div>
          
          <div class="skill-progress">
            <el-progress 
              :percentage="skill.score" 
              :color="getProgressColor(skill.score)"
              :stroke-width="8"
            />
          </div>
          
          <div class="skill-analysis">
            <div class="analysis-item">
              <div class="analysis-label">优势：</div>
              <div class="analysis-content">{{ skill.strengths }}</div>
            </div>
            <div class="analysis-item">
              <div class="analysis-label">改进：</div>
              <div class="analysis-content">{{ skill.improvements }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- AI总结 -->
    <div v-if="result.aiSummary" class="ai-summary-section">
      <div class="summary-header">
        <h3>AI综合评价</h3>
      </div>
      <div class="summary-content">
        <p>{{ result.aiSummary }}</p>
      </div>
    </div>

    <!-- 生成报告按钮 -->
    <div v-if="!result.reportGenerated" class="generate-report-section">
      <el-button 
        type="primary" 
        size="large" 
        @click="generateReport"
        :loading="generateReportLoading"
      >
        生成综合报告
      </el-button>
    </div>

    <!-- 录取成功内容 -->
    <div v-if="result.status === 'passed'" class="success-content">
      <div class="congratulations">
        <div class="congrats-icon">
          <el-icon><Trophy /></el-icon>
        </div>
        <h3>恭喜您成功通过面试！</h3>
        <p>我们很高兴为您提供这个职位机会</p>
      </div>
      
      <div class="team-info">
        <div class="info-section">
          <h4>项目组信息</h4>
          <div class="team-details">
            <div class="detail-item">
              <span class="detail-label">项目组：</span>
              <span class="detail-value">{{ teamInfo.name }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">部门：</span>
              <span class="detail-value">{{ teamInfo.department }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">工作地点：</span>
              <span class="detail-value">{{ teamInfo.location }}</span>
            </div>
          </div>
        </div>
        
        <div class="info-section">
          <h4>联系方式</h4>
          <div class="contact-details">
            <div class="contact-item">
              <el-icon><User /></el-icon>
              <div class="contact-info">
                <div class="contact-name">{{ teamInfo.hrContact.name }}</div>
                <div class="contact-role">{{ teamInfo.hrContact.role }}</div>
              </div>
            </div>
            <div class="contact-item">
              <el-icon><Phone /></el-icon>
              <div class="contact-info">
                <div class="contact-value">{{ teamInfo.hrContact.phone }}</div>
                <div class="contact-label">联系电话</div>
              </div>
            </div>
            <div class="contact-item">
              <el-icon><Message /></el-icon>
              <div class="contact-info">
                <div class="contact-value">{{ teamInfo.hrContact.email }}</div>
                <div class="contact-label">邮箱地址</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 未录取改进建议 -->
    <div v-else class="improvement-content">
      <div class="improvement-header">
        <div class="improvement-icon">
          <el-icon><Warning /></el-icon>
        </div>
        <h3>继续努力，未来可期</h3>
        <p>虽然这次未能成功，但您的表现已经很棒了！</p>
      </div>
      
      <div class="improvement-suggestions">
        <h4>改进建议</h4>
        <div class="suggestions-grid">
          <div v-for="(suggestion, index) in improvements" :key="index" class="suggestion-card">
            <div class="suggestion-header">
              <div class="suggestion-icon">
                <el-icon><Tools /></el-icon>
              </div>
              <h5>{{ suggestion.title }}</h5>
            </div>
            <div class="suggestion-content">
              <p>{{ suggestion.description }}</p>
              <div class="suggestion-actions">
                <div class="action-item">
                  <strong>建议行动：</strong>
                  <span>{{ suggestion.action }}</span>
                </div>
                <div class="action-item">
                  <strong>预期时间：</strong>
                  <span>{{ suggestion.timeframe }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button @click="downloadReport">
        <el-icon><Download /></el-icon>
        下载报告
      </el-button>
      <el-button type="primary" @click="backToDashboard">
        <el-icon><House /></el-icon>
        返回首页
      </el-button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, nextTick, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  ArrowLeft, 
  Calendar, 
  Check, 
  Close, 
  Trophy, 
  User, 
  Phone, 
  Message, 
  Warning, 
  Download, 
  House, 
  Tools,
  Document,
  Clock
} from '@element-plus/icons-vue'
import { sparkApi, interviewResultsApi, audioApi } from '@/services/api'

export default {
  name: 'InterviewResultView',
  components: {
    ArrowLeft,
    Calendar,
    Check,
    Close,
    Trophy,
    User,
    Phone,
    Message,
    Warning,
    Download,
    House,
    Tools,
    Document,
    Clock
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    const applicationId = route.params.applicationId || route.query.applicationId || route.query.id
    const loading = ref(false)
    const generateReportLoading = ref(false)
    const showFrameDetails = ref({})
    const showWaveformDetails = ref({})
    
    const interview = ref({
      id: applicationId,
      company: '腾讯科技',
      position: '前端开发工程师',
      interviewTime: '2024-01-25T14:00:00'
    })
    
    const result = ref({
      status: 'pending',
      overallScore: 0,
      logicalThinkingScore: 0,
      expression_avg_score: 0,
      expression_analysis_summary: null,
      audio_analysis_summary: null,
      videoScores: [],
      audioAnalysis: {},
      expressionAnalysis: {},
      skills: [],
      aiSummary: '',
      reportGenerated: false,
      reportId: null
    })
    
    const teamInfo = ref({
      name: '用户体验技术团队',
      department: '腾讯云智能平台部',
      location: '深圳市南山区科技园',
      hrContact: {
        name: '王小姐',
        role: 'HR业务伙伴',
        phone: '0755-86013388',
        email: 'hr.wang@tencent.com'
      }
    })
    
    const improvements = ref([
      {
        title: '技术深度提升',
        description: '在某些核心技术点上还需要进一步加强',
        action: '深入学习Vue.js生态系统，完成实战项目',
        timeframe: '2-3个月'
      },
      {
        title: '项目经验丰富',
        description: '需要更多大型项目的实战经验',
        action: '参与开源项目或独立完成完整项目',
        timeframe: '3-6个月'
      },
      {
        title: '沟通表达优化',
        description: '在技术方案讲解时可以更加清晰',
        action: '多练习技术分享，提高表达能力',
        timeframe: '1-2个月'
      }
    ])
    
    // 获取面试结果
    const getInterviewResults = async () => {
      if (!applicationId) {
        ElMessage.error('缺少申请ID')
        return
      }
      
      loading.value = true
      try {
        console.log('正在获取面试结果，applicationId:', applicationId)
        
        // 首先尝试使用sparkApi获取结果
        let response = await sparkApi.getInterviewResults(applicationId)
        console.log('sparkApi响应:', response)
        
        // 如果sparkApi失败，尝试使用interviewResultsApi
        if (!response || !response.success) {
          console.log('sparkApi失败，尝试使用interviewResultsApi')
          response = await interviewResultsApi.getInterviewResults(applicationId)
          console.log('interviewResultsApi响应:', response)
        }
        
        if (response && (response.success || response.data)) {
          const data = response.data || response
          
          // 更新面试基本信息
          if (data.application_info) {
            interview.value.company = data.application_info.candidate_name || data.application_info.company || '未知公司'
            interview.value.position = data.application_info.job_title || data.application_info.position || '未知职位'
          }
          
          // 更新结果数据
          result.value = {
            status: data.session_info?.status === 'completed' ? 'passed' : 'pending',
            overallScore: Math.round(data.scores?.overall_score || 0),
            logicalThinkingScore: Math.round(data.scores?.logical_thinking_score || 0),
            expression_avg_score: Math.round(data.expression_avg_score || 0),
            expression_analysis_summary: data.expression_analysis_summary || null,
            audio_analysis_summary: data.audio_analysis_summary || null,
            videoScores: data.scores?.video_scores || data.video_answers_detail || [],
            audioAnalysis: data.scores?.audio_analysis || {},
            expressionAnalysis: data.scores?.expression_analysis || {},
            skills: transformVideoScoresToSkills(data.scores?.video_scores || data.video_answers_detail || []),
            aiSummary: data.ai_summary || '',
            reportGenerated: data.session_info?.status === 'completed',
            reportId: data.report_id
          }
          
          // 根据综合得分判断状态
          if (result.value.overallScore >= 70) {
            result.value.status = 'passed'
          } else if (result.value.overallScore > 0) {
            result.value.status = 'failed'
          }
          
          console.log('面试结果处理完成')
          
        } else {
          console.error('API响应格式错误:', response)
          ElMessage.error('获取面试结果失败：响应格式错误')
        }
      } catch (error) {
        console.error('获取面试结果失败:', error)
        console.error('错误详情:', {
          message: error.message,
          response: error.response?.data,
          status: error.response?.status,
          url: error.config?.url
        })
        
        if (error.response?.status === 401) {
          ElMessage.error('请先登录')
        } else if (error.response?.status === 404) {
          ElMessage.error('面试结果不存在，请检查申请ID是否正确')
        } else if (error.response?.status === 500) {
          ElMessage.error('服务器错误，请稍后重试')
        } else {
          ElMessage.error(`获取面试结果失败: ${error.message}`)
        }
      } finally {
        loading.value = false
      }
    }
    
    // 智能获取音频分析字段值
    const getAudioFieldValue = (audioAnalysis, fieldNames) => {
      if (!audioAnalysis) return null
      
      for (const fieldName of fieldNames) {
        if (audioAnalysis[fieldName] !== undefined && audioAnalysis[fieldName] !== null) {
          return audioAnalysis[fieldName]
        }
      }
      return null
    }
    
    // 转换视频得分为技能数据
    const transformVideoScoresToSkills = (videoScores) => {
      const skills = []
      
      videoScores.forEach(video => {
        const scores = video.scores || {}
        
        if (scores.expression_score) {
          skills.push({
            name: '表达能力',
            score: Math.round(scores.expression_score),
            strengths: '语言表达清晰，逻辑较为清楚',
            improvements: '可以进一步提升表达的感染力'
          })
        }
        
        if (scores.innovation_score) {
          skills.push({
            name: '创新能力',
            score: Math.round(scores.innovation_score),
            strengths: '思维活跃，有创新想法',
            improvements: '可以增加实际案例支撑'
          })
        }
        
        if (scores.professional_skill_score) {
          skills.push({
            name: '专业技能',
            score: Math.round(scores.professional_skill_score),
            strengths: '专业基础扎实',
            improvements: '可以加强实际应用能力'
          })
        }
        
        if (scores.stress_management_score) {
          skills.push({
            name: '压力应对',
            score: Math.round(scores.stress_management_score),
            strengths: '面对压力保持冷静',
            improvements: '可以更好地展现解决问题的能力'
          })
        }
      })
      
      return skills
    }
    
    // 生成综合报告
    const generateReport = async () => {
      if (!applicationId) {
        ElMessage.error('缺少申请ID')
        return
      }
      
      generateReportLoading.value = true
      try {
        const response = await sparkApi.generateReport(applicationId)
        
        if (response.success) {
          ElMessage.success('综合报告生成成功')
          result.value.reportGenerated = true
          result.value.reportId = response.data.report_id
          result.value.aiSummary = response.data.summary
          
          // 重新获取结果以显示最新状态
          await getInterviewResults()
        } else {
          ElMessage.error('生成报告失败')
        }
      } catch (error) {
        console.error('生成报告失败:', error)
        ElMessage.error('生成报告失败')
      } finally {
        generateReportLoading.value = false
      }
    }
    
    const getCategoryType = (category) => {
      const types = {
        'innovation': 'success',
        'professional': 'info',
        'pressure': 'warning'
      }
      return types[category] || 'info'
    }

    // 获取评分颜色（用于表情分析）
    const getScoreColor = (score) => {
      if (score >= 80) return '#67c23a'
      if (score >= 60) return '#e6a23c'
      return '#f56c6c'
    }

    // 获取情绪类型
    const getEmotionType = (emotion) => {
      const types = {
        'confident': 'success',
        'neutral': 'info',
        'nervous': 'warning',
        'anxious': 'danger',
        'excited': 'success',
        'calm': 'info'
      }
      return types[emotion] || 'info'
    }

    // 获取情绪标签
    const getEmotionLabel = (emotion) => {
      const labels = {
        'confident': '自信',
        'neutral': '平静',
        'nervous': '紧张',
        'anxious': '焦虑',
        'excited': '兴奋',
        'calm': '冷静'
      }
      return labels[emotion] || emotion
    }

    // 切换帧详情显示
    const toggleFrameDetails = (index) => {
      showFrameDetails.value[index] = !showFrameDetails.value[index]
    }

    // 切换波形图详情显示
    const toggleWaveformDetails = (index) => {
      showWaveformDetails.value[index] = !showWaveformDetails.value[index]
    }
    
    const getCategoryName = (category) => {
      const names = {
        'innovation': '创新能力',
        'professional': '专业技能',
        'pressure': '压力应对'
      }
      return names[category] || category
    }
    
    const getVideoUrl = (videoPath) => {
      if (!videoPath) return null
      if (videoPath.startsWith('http')) {
        return videoPath
      }
      return `http://127.0.0.1:8000${videoPath}`
    }
    
    const goBack = () => {
      router.go(-1)
    }
    
    const getProgressColor = (score) => {
      if (score >= 90) return '#67c23a'
      if (score >= 80) return '#409eff'
      if (score >= 70) return '#e6a23c'
      return '#f56c6c'
    }

    const getOverallEvaluationType = (evaluation) => {
      switch (evaluation) {
        case '优秀': return 'success'
        case '良好': return 'warning'
        case '一般': return 'info'
        case '较差': return 'danger'
        default: return 'info'
      }
    }

    // 获取音频得分类型
    const getAudioScoreType = (score) => {
      if (score >= 80) return 'success'
      if (score >= 60) return 'warning'
      return 'info'
    }

    // 获取音频得分等级
    const getAudioScoreLevel = (score) => {
      if (score >= 80) return '优秀'
      if (score >= 60) return '良好'
      return '一般'
    }

    // 获取性别标签
    const getGenderLabel = (gender) => {
      if (gender === 'male') return '男'
      if (gender === 'female') return '女'
      return '未知'
    }

    // 绘制波形图
    const drawWaveformChart = (canvasRef, frameData) => {
      if (!frameData || frameData.length === 0) return
      
      const canvas = canvasRef
      const ctx = canvas.getContext('2d')
      const width = canvas.width
      const height = canvas.height
      
      // 清空画布
      ctx.clearRect(0, 0, width, height)
      
      // 设置背景
      ctx.fillStyle = '#f8f9fa'
      ctx.fillRect(0, 0, width, height)
      
      // 绘制网格
      ctx.strokeStyle = '#e5e7eb'
      ctx.lineWidth = 1
      
      // 水平网格线
      for (let i = 0; i <= 10; i++) {
        const y = (height / 10) * i
        ctx.beginPath()
        ctx.moveTo(0, y)
        ctx.lineTo(width, y)
        ctx.stroke()
      }
      
      // 垂直网格线
      for (let i = 0; i <= 20; i++) {
        const x = (width / 20) * i
        ctx.beginPath()
        ctx.moveTo(x, 0)
        ctx.lineTo(x, height)
        ctx.stroke()
      }
      
      // 计算数据范围
      const pitchValues = frameData.map(frame => frame.pitch || 0)
      const volumeValues = frameData.map(frame => frame.volume || 0)
      
      const pitchMin = Math.min(...pitchValues)
      const pitchMax = Math.max(...pitchValues)
      const volumeMin = Math.min(...volumeValues)
      const volumeMax = Math.max(...volumeValues)
      
      // 绘制音高曲线
      if (pitchMax > pitchMin) {
        ctx.strokeStyle = '#409eff'
        ctx.lineWidth = 2
        ctx.beginPath()
        
        frameData.forEach((frame, index) => {
          const x = (index / (frameData.length - 1)) * width
          const normalizedPitch = (frame.pitch - pitchMin) / (pitchMax - pitchMin)
          const y = height - (normalizedPitch * height * 0.4) // 使用40%的高度给音高
          
          if (index === 0) {
            ctx.moveTo(x, y)
          } else {
            ctx.lineTo(x, y)
          }
        })
        
        ctx.stroke()
      }
      
      // 绘制音量曲线
      if (volumeMax > volumeMin) {
        ctx.strokeStyle = '#67c23a'
        ctx.lineWidth = 2
        ctx.beginPath()
        
        frameData.forEach((frame, index) => {
          const x = (index / (frameData.length - 1)) * width
          const normalizedVolume = (frame.volume - volumeMin) / (volumeMax - volumeMin)
          const y = height - (normalizedVolume * height * 0.4 + height * 0.5) // 使用40%的高度给音量，从50%开始
          
          if (index === 0) {
            ctx.moveTo(x, y)
          } else {
            ctx.lineTo(x, y)
          }
        })
        
        ctx.stroke()
      }
      
      // 添加坐标轴标签
      ctx.fillStyle = '#666'
      ctx.font = '12px Arial'
      ctx.textAlign = 'center'
      
      // X轴标签（时间）
      const timeLabels = ['0s', '25%', '50%', '75%', '100%']
      timeLabels.forEach((label, index) => {
        const x = (index / (timeLabels.length - 1)) * width
        ctx.fillText(label, x, height - 5)
      })
      
      // Y轴标签
      ctx.textAlign = 'right'
      ctx.fillText(`${Math.round(pitchMax)}Hz`, 30, 20)
      ctx.fillText(`${Math.round(pitchMin)}Hz`, 30, height * 0.4)
      ctx.fillText(`${Math.round(volumeMax)}dB`, 30, height * 0.5 + 20)
      ctx.fillText(`${Math.round(volumeMin)}dB`, 30, height - 20)
    }

    // 监听波形图显示状态变化
    const watchWaveformDetails = () => {
      nextTick(() => {
        Object.keys(showWaveformDetails.value).forEach(index => {
          if (showWaveformDetails.value[index]) {
            const canvasRef = document.querySelector(`canvas[ref="waveformChart${index}"]`)
            if (canvasRef && result.value.videoScores[index]?.audio_analysis?.frame_data) {
              drawWaveformChart(canvasRef, result.value.videoScores[index].audio_analysis.frame_data)
            }
          }
        })
      })
    }
    
    const formatDateTime = (dateString) => {
      return new Date(dateString).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
    
    const downloadReport = () => {
      ElMessage.success('报告下载功能开发中...')
    }
    
    const backToDashboard = () => {
      router.push('/candidate/dashboard')
    }
    
    // 页面初始化时加载数据
    onMounted(() => {
      getInterviewResults()
      
      // 监听波形图显示状态变化
      watch(showWaveformDetails, watchWaveformDetails, { deep: true })
    })
    
    return {
      interview,
      result,
      teamInfo,
      improvements,
      loading,
      generateReportLoading,
      goBack,
      getProgressColor,
      formatDateTime,
      downloadReport,
      backToDashboard,
      getInterviewResults,
      generateReport,
      getCategoryType,
      getCategoryName,
      getVideoUrl,
      getOverallEvaluationType,
      getScoreColor,
      getEmotionType,
      getEmotionLabel,
      toggleFrameDetails,
      showFrameDetails,
      toggleWaveformDetails,
      showWaveformDetails,
      getAudioScoreType,
      getAudioScoreLevel,
      getGenderLabel,
      drawWaveformChart,
      watchWaveformDetails,
      getAudioFieldValue
    }
  }
}
</script>

<style scoped>
.interview-result-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.loading-section {
  background: white;
  border-radius: 12px;
  padding: 40px;
  margin-bottom: 20px;
}

.result-header {
  margin-bottom: 30px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.back-button .el-button {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  backdrop-filter: blur(10px);
}

.back-button .el-button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.result-title h1 {
  color: white;
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
}

.result-title p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-size: 18px;
}

.result-overview {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.overview-left {
  flex: 1;
}

.company-info {
  background: white;
  border-radius: 12px;
  padding: 30px;
  display: flex;
  gap: 20px;
  align-items: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.company-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(45deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  font-weight: bold;
}

.company-details h3 {
  margin: 0 0 8px 0;
  color: #1f2937;
  font-size: 24px;
}

.company-details p {
  margin: 0 0 16px 0;
  color: #6b7280;
  font-size: 16px;
}

.interview-time {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 14px;
}

.overview-right {
  flex: 1;
}

.result-status {
  background: white;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 20px;
}

.status-badge.passed {
  background: #d1fae5;
  color: #065f46;
}

.status-badge.failed {
  background: #fee2e2;
  color: #991b1b;
}

.overall-score {
  margin-top: 20px;
}

.score-circle {
  display: inline-block;
  text-align: center;
}

.score-number {
  font-size: 48px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

.score-label {
  font-size: 14px;
  color: #6b7280;
  margin-top: 8px;
}

.logic-score-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.expression-score-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.expression-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.breakdown-item {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.breakdown-label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.breakdown-value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.expression-details {
  border-top: 1px solid #e4e7ed;
  padding-top: 24px;
}

.expression-details h4 {
  margin-bottom: 16px;
  color: #333;
}

.expression-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.expression-evaluation {
  text-align: center;
  margin-top: 16px;
}

/* 表情分析样式 */
.expression-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.expression-header h5 {
  margin: 0;
  color: #333;
}

.expression-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.analysis-info {
  font-size: 12px;
  color: #666;
  background: #f5f5f5;
  padding: 2px 8px;
  border-radius: 4px;
}

.expression-core-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.core-metric {
  text-align: center;
}

.metric-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  color: white;
  font-weight: bold;
  font-size: 16px;
}

.metric-label {
  font-size: 12px;
  color: #666;
}

.expression-detailed-metrics {
  margin-bottom: 20px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.expression-stats {
  display: flex;
  justify-content: space-between;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.stat-value {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.frame-details {
  border-top: 1px solid #e4e7ed;
  padding-top: 16px;
}

.frame-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.frame-header h6 {
  margin: 0;
  color: #333;
}

.frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.frame-item {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.frame-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.frame-name {
  font-size: 12px;
  color: #666;
}

.frame-scores {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.frame-score {
  display: flex;
  align-items: center;
  gap: 8px;
}

.frame-score span {
  font-size: 11px;
  color: #666;
  min-width: 50px;
}

.frame-angles {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #999;
}

.angle-item {
  text-align: center;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  color: #1f2937;
  font-size: 20px;
}

.logic-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.score-value {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
}

.score-max {
  font-size: 16px;
  color: #6b7280;
}

.video-analysis-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.video-scores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.video-score-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  background: #f9fafb;
}

.video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.video-header h4 {
  margin: 0;
  color: #1f2937;
  font-size: 16px;
}

.video-content {
  margin-bottom: 16px;
}

.video-content video {
  border-radius: 8px;
}

.scores-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.score-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.score-label {
  font-size: 12px;
  color: #6b7280;
}

.audio-analysis, .expression-analysis {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.audio-analysis h5, .expression-analysis h5 {
  margin: 0 0 12px 0;
  color: #1f2937;
  font-size: 14px;
}

.audio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.audio-header h5 {
  margin: 0;
  color: #1f2937;
  font-size: 16px;
}

.audio-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.transcription-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.transcription-section h6 {
  margin: 0 0 12px 0;
  color: #1f2937;
  font-size: 14px;
}

.transcription-content {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}

.transcription-content p {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 14px;
  line-height: 1.6;
}

.transcription-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #666;
}

.transcription-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.audio-core-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.audio-core-metrics .core-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.audio-core-metrics .metric-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.audio-core-metrics .metric-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.audio-core-metrics .metric-detail {
  font-size: 10px;
  color: #999;
}

.audio-detailed-metrics {
  margin: 20px 0;
}

.audio-detailed-metrics .metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.audio-detailed-metrics .metric-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audio-detailed-metrics .metric-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.audio-detailed-metrics .metric-value {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.audio-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.audio-stats .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.audio-stats .stat-label {
  font-size: 11px;
  color: #666;
}

.audio-stats .stat-value {
  font-size: 13px;
  font-weight: bold;
  color: #333;
}

.waveform-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.waveform-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.waveform-header h6 {
  margin: 0;
  color: #1f2937;
  font-size: 14px;
}

.waveform-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.chart-container {
  width: 100%;
  max-width: 800px;
  height: 300px;
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.waveform-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.pitch-color {
  background: #409eff;
}

.volume-color {
  background: #67c23a;
}

.transcription-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.transcription-content {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}

.transcription-content p {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 14px;
  line-height: 1.6;
}

.transcription-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #666;
}

.audio-core-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.audio-detailed-metrics {
  margin-bottom: 20px;
}

.waveform-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.waveform-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.waveform-header h6 {
  margin: 0;
  color: #1f2937;
  font-size: 16px;
}

.waveform-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.chart-container {
  width: 100%;
  max-width: 800px;
  height: 300px;
  background: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.waveform-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.pitch-color {
  background: #409eff; /* 蓝色 */
}

.volume-color {
  background: #67c23a; /* 绿色 */
}

.detailed-analysis {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.analysis-header {
  text-align: center;
  margin-bottom: 40px;
}

.analysis-header h2 {
  color: #1f2937;
  margin: 0 0 12px 0;
  font-size: 28px;
}

.analysis-header p {
  color: #6b7280;
  margin: 0;
  font-size: 16px;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.skill-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  background: #f9fafb;
}

.skill-header {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.skill-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(45deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.skill-info {
  flex: 1;
}

.skill-info h4 {
  margin: 0 0 8px 0;
  color: #1f2937;
  font-size: 18px;
}

.skill-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.skill-progress {
  margin-bottom: 20px;
}

.skill-analysis {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.analysis-item {
  display: flex;
  gap: 8px;
}

.analysis-label {
  font-weight: 600;
  color: #374151;
  min-width: 50px;
}

.analysis-content {
  color: #6b7280;
  line-height: 1.6;
}

.ai-summary-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.summary-header h3 {
  margin: 0 0 16px 0;
  color: #1f2937;
  font-size: 20px;
}

.summary-content {
  background: #f0f9ff;
  border-left: 4px solid #3b82f6;
  padding: 20px;
  border-radius: 8px;
}

.summary-content p {
  margin: 0;
  color: #1e40af;
  line-height: 1.6;
}

.generate-report-section {
  text-align: center;
  margin-bottom: 30px;
}

.generate-report-section .el-button {
  padding: 16px 32px;
  font-size: 16px;
}

.success-content {
  background: white;
  border-radius: 12px;
  padding: 40px;
  margin-bottom: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.congratulations {
  text-align: center;
  margin-bottom: 40px;
}

.congrats-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(45deg, #10b981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  margin: 0 auto 20px;
}

.congratulations h3 {
  color: #1f2937;
  margin: 0 0 12px 0;
  font-size: 24px;
}

.congratulations p {
  color: #6b7280;
  margin: 0;
  font-size: 16px;
}

.team-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.info-section h4 {
  color: #1f2937;
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
}

.team-details, .contact-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  gap: 8px;
}

.detail-label {
  font-weight: 600;
  color: #374151;
  min-width: 80px;
}

.detail-value {
  color: #6b7280;
}

.contact-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.contact-info {
  flex: 1;
}

.contact-name {
  font-weight: 600;
  color: #1f2937;
}

.contact-role {
  font-size: 14px;
  color: #6b7280;
}

.contact-value {
  font-weight: 600;
  color: #1f2937;
}

.contact-label {
  font-size: 14px;
  color: #6b7280;
}

.improvement-content {
  background: white;
  border-radius: 12px;
  padding: 40px;
  margin-bottom: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.improvement-header {
  text-align: center;
  margin-bottom: 40px;
}

.improvement-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f59e0b, #d97706);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  margin: 0 auto 20px;
}

.improvement-header h3 {
  color: #1f2937;
  margin: 0 0 12px 0;
  font-size: 24px;
}

.improvement-header p {
  color: #6b7280;
  margin: 0;
  font-size: 16px;
}

.improvement-suggestions h4 {
  color: #1f2937;
  margin: 0 0 24px 0;
  font-size: 20px;
}

.suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.suggestion-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  background: #f9fafb;
}

.suggestion-header {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.suggestion-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f59e0b, #d97706);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.suggestion-header h5 {
  margin: 0;
  color: #1f2937;
  font-size: 16px;
}

.suggestion-content p {
  color: #6b7280;
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.suggestion-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.action-item strong {
  color: #374151;
  min-width: 80px;
}

.action-item span {
  color: #6b7280;
}

.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.action-buttons .el-button {
  padding: 12px 24px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .result-overview {
    flex-direction: column;
  }
  
  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .company-info {
    flex-direction: column;
    text-align: center;
  }
  
  .team-info {
    grid-template-columns: 1fr;
  }
  
  .analysis-grid {
    grid-template-columns: 1fr;
  }
  
  .video-scores-grid {
    grid-template-columns: 1fr;
  }
  
  .suggestions-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
</style> 